<template>
  <div v-if="flag">loading...</div>
</template>
<script setup lang="ts">
// 定义控制组件显示的变量
const flag = ref<boolean>(false)
// 定义切换组件显示的方法
const show = () => {
  flag.value = true
}
const hide = () => {
  flag.value = false
}
// 导出组件的使用方法以及变量
defineExpose({
  show,
  hide,
  flag
})
</script>
<style lang="less" scoped>
div {
  text-align: center;
  background-color: lightgray;
  color: black;
  width: 200px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-100px, -100px);
}
</style>
